<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>实验室助理工作管理系统</title>
    <link rel="stylesheet" th:href="@{/Light-Year-Admin/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/Light-Year-Admin/css/materialdesignicons.min.css}">
    <link rel="stylesheet" th:href="@{/Light-Year-Admin/css/style.min.css}">
    <!--对话框-->
    <link rel="stylesheet" th:href="@{/Light-Year-Admin/js/jconfirm/jquery-confirm.min.css}">
    <style>
        .lyear-wrapper {
            position: relative;
        }
        .lyear-login {
            display: flex !important;
            min-height: 100vh;
            align-items: center !important;
            justify-content: center !important;
        }
        .lyear-login:after{
            content: '';
            min-height: inherit;
            font-size: 0;
        }
        .login-center {
            background: #fff;
            min-width: 29.25rem;
            padding: 2.14286em 3.57143em;
            border-radius: 3px;
            margin: 2.85714em;
        }
        .login-header {
            margin-bottom: 1.5rem !important;
        }
        .login-center .has-feedback.feedback-left .form-control {
            padding-left: 38px;
            padding-right: 12px;
        }
        .login-center .has-feedback.feedback-left .form-control-feedback {
            left: 0;
            right: auto;
            width: 38px;
            height: 38px;
            line-height: 38px;
            z-index: 4;
            color: #dcdcdc;
        }
        .login-center .has-feedback.feedback-left.row .form-control-feedback {
            left: 15px;
        }
    </style>
</head>
<body>

<div class="row lyear-wrapper" style="background-image: url(/images/bg2.jpg); background-size: cover;">
    <div class="lyear-login">
        <div class="login-center">
            <div class="login-header text-center">
                <a href="" style="font-size: 25px">实验室助理工作管理系统</a>
            </div>
            <form action="" method="">
                <div class="form-group has-feedback feedback-left">
                    <input type="text" placeholder="请输入您的用户名" class="form-control" name="username" id="username" required/>
                    <span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>
                </div>
                <div class="form-group has-feedback feedback-left">
                    <input type="password" placeholder="请输入密码" class="form-control" id="password" name="password" required/>
                    <span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
                </div>
                <div class="form-group">
                    <a class="" type="" href="javascript:register()">立即注册(学生)</a>
                </div>
                <div class="form-group">
                    <button class="btn btn-block btn-primary" type="button" onclick="login()">立即登录</button>
                </div>
            </form>
            <hr>
            <footer class="col-sm-12 text-center">
                <p class="m-b-0">Copyright © 2021 <a href="">ZLC</a>. All right reserved</p>
            </footer>
        </div>
    </div>
</div>

<!-- 模态框(学生注册) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">学生填写注册信息</h4>
            </div>
            <div class="modal-body">

                <!--页面主要内容-->
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">
                                <form action=""  class="row" id="userForm" name="myform">
                                    <div class="form-group col-md-12">
                                        <label for="stuId">学号</label>
                                        <input type="text" class="form-control" id="stuId" name="stuId"  value="" placeholder="" required/>
                                    </div>
                                    <div class="form-group col-md-12">
                                        <label for="stuName">姓名</label>
                                        <input type="text" class="form-control" id="stuName" name="stuName" value="" placeholder="" required/>
                                    </div>
                                    <div class="form-group col-md-12">
                                        <label for="password1">密码</label>
                                        <input type="password" class="form-control" id="password1" name="password1" value="" placeholder="" required/>
                                    </div>
                                    <div class="form-group col-md-12">
                                        <label for="major">专业</label>
                                        <input type="text" class="form-control" id="major" name="major" value="" placeholder="" required/>
                                    </div>
                                    <div class="form-group col-md-12">
                                        <label for="college">学院</label>
                                        <div class="form-controls">
                                            <select name="" class="form-control" id="college" required>
                                                <option value="">选择学院</option>
                                                <option value="宝石与艺术学院">宝石与艺术学院</option>
                                                <option value="外国语学院">外国语学院</option>
                                                <option value="商学院">商学院</option>
                                                <option value="机械与材料工程学院、化学工程与资源再利用学院">机械与材料工程学院、化学工程与资源再利用学院</option>
                                                <option value="教师教育学院">教师教育学院</option>
                                                <option value="大数据与软件工程学院">大数据与软件工程学院</option>
                                                <option value="电子与信息工程学院">电子与信息工程学院</option>
                                                <option value="文学与传媒学院">文学与传媒学院</option>
                                                <option value="法学与公共管理学院">法学与公共管理学院</option>
                                                <option value="马克思主义学院">马克思主义学院</option>
                                                <option value="继续教育学院、高等职业技术">继续教育学院、高等职业技术</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-12">
                                        <label for="aclass">班级</label>
                                        <input type="text" class="form-control" id="aclass" name="aclass" value="" placeholder="" required/>
                                    </div>
                                    <div class="form-group col-md-12">
                                        <label for="grade">年级</label>
                                        <input type="text" class="form-control" id="grade" name="grade" value="" placeholder="" required/>
                                    </div>
                                    <div class="form-group col-md-12">
                                        <label for="phone">手机号</label>
                                        <input type="text" class="form-control" id="phone" name="phone" value="" placeholder="" required/>
                                    </div>
                                    <div class="form-group col-md-12">
                                        <label for="phone">邮箱</label>
                                        <input type="text" class="form-control" id="mailbox" name="mailbox" value="" placeholder="" required/>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>
                </div>
                <!--End 页面主要内容-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="modify()">提交</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" th:src="@{/js/jquery-3.6.0.min.js}"></script>
<!--<script type="text/javascript" th:src="@{/Light-Year-Admin/js/jquery.min.js}"></script>-->
<script type="text/javascript" th:src="@{/Light-Year-Admin/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/Light-Year-Admin/js/perfect-scrollbar.min.js}"></script>
<script type="text/javascript" th:src="@{/Light-Year-Admin/js/main.min.js}"></script>
<!--消息提示-->
<script th:src="@{/Light-Year-Admin/js/bootstrap-notify.min.js}"></script>
<script type="text/javascript" th:src="@{/Light-Year-Admin/js/lightyear.js}"></script>
<!--对话框-->
<script th:src="@{/Light-Year-Admin/js/jconfirm/jquery-confirm.min.js}"></script>

<script>
    function login() {
        let username = $("#username").val();
        let password = $("#password").val();
        console.log(username)
        if (!username) {
            lightyear.notify('请输入账号', 'danger', 1000, 'mdi mdi-emoticon-happy', 'top', 'center');
            return;
        }
        let data = {username: username, password: password}
        $.ajax({
            type: "POST",
            url: "/login2",
            data: JSON.stringify(data),
            contentType: "application/json",
            success: function (result) {
                console.log(result)
                if(result.code == 200 ){
                    location.href = "/toIndex";
                }else{
                    lightyear.notify('用户名或密码错误', 'danger', 1000, 'mdi mdi-emoticon-happy', 'top', 'center');
                }
            }
        })
    }

    // 打开学生注册页面
    function register() {
        reset()
        $('#myModal').modal('show');
    }

    // 清空模态框
    function reset() {
        $('#stuId').val("");
        $('#stuName').val("");
        $('#password1').val("");
        $('#major').val("");
        $('#college').val("");
        $('#aclass').val("");
        $('#grade').val("");
        $('#phone').val("");
        $('#mailbox').val("");
    }

    // 提交学生注册信息
    function modify() {
        //获取模态框数据
        let stuId = $('#stuId').val();
        let stuName = $('#stuName').val();
        let password1 = $('#password1').val();
        let major = $('#major').val();
        let college = $('#college').val();
        let aclass = $('#aclass').val();
        let grade = $('#grade').val();
        let phone = $('#phone').val();
        let mailbox = $('#mailbox').val();

        var param = {stuId: stuId, stuName: stuName,major:major,password:password1,
            college:college,aclass:aclass,grade:grade,phone:phone,mailbox:mailbox};

        $.ajax({
            url: "/student2/add",
            type: "POST",
            contentType: "application/json",
            dataType: "json",
            data: JSON.stringify(param),
            success: function (data) {
                if(data.code == 200 ){
                    reset();
                    $('#myModal').modal('hide');
                    lightyear.notify(data.msg, 'success', 800, 'mdi mdi-emoticon-happy', 'top', 'center');
                }else{
                    reset();
                    $('#myModal').modal('hide');
                    lightyear.notify(data.msg, 'danger', 800, 'mdi mdi-emoticon-happy', 'top', 'center');
                }
            }
        });
    }
</script>
</body>
</html>